<script setup>
import {pcaTextArr} from 'element-china-area-data'
import {Search} from "@element-plus/icons-vue";
import RanksDialog from "@/components/Talent/RanksDialog.vue";
import {ref} from "vue";
import {Nation} from "@/apis/zyj/56nation"


const props = defineProps({
  allUnits: Array,
  findDialog: Boolean,
  form: Object
})
const ranksDialog = ref(false)

const selectedRank = () => {
  ranksDialog.value = true
}

const emit = defineEmits(['close-dialog'])
// 关闭弹窗
const handleClose = () => {
  emit('close-dialog')
}
const handleAddressChange = () => {
}
const CloseDialog = () => {
  ranksDialog.value = false
}
const pickRank = (e) => {
  console.log(e)
  console.log(props.form)
  props.form["ranks"] = e
  console.log(props.form)
  ranksDialog.value = false
}
</script>

<template>
  <el-dialog title="员工花名册" v-model="props.findDialog" @close="handleClose" width="60%" align-center>
    <el-form :model="props.form" label-width="120px" class="demo-ruleForm">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="员工编码" prop="employeeId">
            <el-input v-model="form['employeeCode']"/>
          </el-form-item>

        </el-col>
        <el-col :span="8">
          <el-form-item label="员工姓名" prop="name">
            <el-input v-model="form['employeeName']"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学历">
            <el-select v-model="form['education']" placeholder="选择学历">
              <el-option label="初中" value="初中"/>
              <el-option label="高中" value="高中"/>
              <el-option label="专科" value="专科"/>
              <el-option label="本科" value="本科"/>
              <el-option label="研究生" value="研究生"/>
              <el-option label="硕士" value="硕士"/>
              <el-option label="博士" value="博士"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="职级编码">
            <el-input
                v-model="form['ranks'].rankNo"
                placeholder="请选择职级"
            >
              <template #append>
                <el-button @click="selectedRank">
                  <el-icon>
                    <Search/>
                  </el-icon>
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职级名称">
            <el-input v-model="form['ranks'].rankArrangementName"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职级层次">
            <el-input v-model="form['ranks'].rankArrangement"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="9">
          <el-form-item label="薪资范围">
            <el-input v-model="form['ranks'].salaryMinimum" placeholder="Min" style="width: 45%"/>
            <span style="margin: 0 5px;">~</span>
            <el-input v-model="form['ranks'].salaryCap" placeholder="Max" style="width: 45%"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实际薪资">
            <el-input v-model="form['actualSalary']"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="员工性别">
            <el-select v-model="form['gender']" placeholder="请选择性别">
              <el-option label="男" value="男"/>
              <el-option label="女" value="女"/>
              <el-option label="未知" value="未知"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form['phone']"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="民族">
            <el-select v-model="form['ethnicity']" placeholder="请选择名族">
              <el-option v-for="item in Nation" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="出生年月">
            <el-date-picker v-model="form['birthDate']" type="date" placeholder="请选择日期"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="婚姻状况">
            <el-select v-model="form['maritalStatus']" placeholder="请选择婚姻状况">
              <el-option label="已婚" value="已婚"/>
              <el-option label="未婚" value="未婚"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="政治面貌">
            <el-select v-model="form['politicalStatus']" placeholder="请选择政治面貌">
              <el-option label="群众" value="群众"/>
              <el-option label="团员" value="团员"/>
              <el-option label="党员" value="党员"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="身份证号">
            <el-input v-model="form['idNumber']"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱">
            <el-input v-model="form['email']"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="籍贯">
            <el-input v-model="form['nativePlace']"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="户口地址">
            <el-cascader
                size="large"
                :options="pcaTextArr"
                v-model="form['accountAddress']"
                clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-input v-model="form['accountDetailedAddress']"/>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="现住地址">
            <el-cascader
                size="large"
                v-model="form['currentAddress']"
                :options="pcaTextArr"
                clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-input v-model="form['currentDetailedAddress']"/>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="紧急联系人">
            <el-input v-model="form['emergencyContact']"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急联系电话">
            <el-input v-model="form['emergencyContactPhone']"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关系">
            <el-input v-model="form['relationship']"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
         <span class="dialog-footer">
           <el-button @click="handleClose">关闭</el-button>
         </span>
    </template>
  </el-dialog>
  <RanksDialog :rankDialog="ranksDialog" @close-dialog="CloseDialog" @pick-rank="pickRank"/>
</template>

<style scoped>
::v-deep(.el-form-item__label) {
  color: #606266;
  font-size: 14px;
  font-weight: 700;
}
</style>
   